<template>
  <el-container ref="fileview">
    <el-row style="width:100%">
      <el-col style="width:29%">
        <table-tree  ref="tableTree"
                     @srcSelectHandler="getDataByDir"
                     style="height: 400px; overflow-y: auto"></table-tree>
      </el-col>
      <el-col style="margin-left:10px;width:68%;">
        <el-row  style="height: 400px;width:100%;">
          <el-row type="flex" style="margin-bottom: 10px;" >
            <el-input placeholder="文件名称"
                      clearable
                      @keyup.enter.native="getDataList()"
                      maxlength="20"
                      v-model="dataForm.name"
                      style="max-width: 300px; margin-right: 10px;padding-top: 6px"
                      class="input-with-select">
              <el-button slot="append"
                         icon="el-icon-search"
                         @click="getDataList()"></el-button>
            </el-input>
            <div style="padding-top: 6px; height: 40px;flex: 1;text-align: right;">
              <el-button  type="primary"  @click="selectData">确认选择</el-button>
            </div>
          </el-row>
          <el-row >
            <el-table :data="fileData"
                      border
                      ref="multipleTable"
                      height="300"
                      tooltip-effect="light"
                      @selection-change="selectionChangeHandle"
                      @row-dblclick="rowDbclick"
                      :cell-style="cellStyle">
              <el-table-column type="selection"
                               align="center"
                               :resizable="false"
                               width="50"></el-table-column>
              <el-table-column label="文件名"
                               width="330"
                               sortable
              >
                <template slot-scope="scope">
                  <i v-if="fileType.PDF === scope.row.dirType"
                     class="el-icon-document"
                     style="color: #4C96FE; font-size: 32px;"></i>
                  <i v-if="fileType.VIDEO === scope.row.dirType"
                     class="el-icon-film"
                     style="color: #8082F0; font-size: 32px;"></i>
                  <i v-if="fileType.AUDIO === scope.row.dirType"
                     class="el-icon-headset"
                     style="color: #8082F0; font-size: 32px;"></i>
                  <i v-if="fileType.XLSX === scope.row.dirType"
                     class="el-icon-s-order"
                     style="color: #8082F0; font-size: 32px;"></i>
                  <i v-if="fileType.IMG === scope.row.dirType"
                     class="el-icon-picture"
                     style="color: #FE7642; font-size: 32px;"></i>
                  <span style="margin-left: 10px"
                        @dblclick="dbClickHandler(scope.row)">{{ scope.row.fileName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间"
                               width="180"
                               sortable>
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px;">{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="大小"
                               prop="fileSize">
                <template slot-scope="scope">
                  <span v-if="scope.row.fileSize === 0">---</span>
                  <span v-else-if="scope.row.fileSize >= 1024">{{ scope.row.fileSize / 1024 | numFilter }}M</span>
                  <span v-else-if="scope.row.fileSize < 1024">{{ scope.row.fileSize | numFilter }} K</span>
                </template>
              </el-table-column>
              <el-table-column label="操作"
                               align="center"
                               :resizable="false"
                               width="80">
                <template slot-scope="scope">
                  <el-tooltip class="item"
                              effect="light"
                              content="预览"
                              placement="top"
                              v-if="isDir(scope.row.fileType)">
                    <el-button v-if="isAuth('src:file:info')"
                               class="el-icon-view"
                               circle
                               size="mini"
                               @click="filePreview(scope.row.id)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-pagination @size-change="sizeChangeHandle"
                         @current-change="currentChangeHandle"
                         :current-page="pageIndex"
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         :total="totalCount"
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
          <el-drawer title="文件预览" direction="rtl" :visible.sync="excelPreviewVisible" size="calc(100% - 230px);">
            <excelPreview-info style="padding: 0 10px;" ref="excelPreviewInfo"
                               :mheight="domHeight + 120"></excelPreview-info>
          </el-drawer>
        </el-row>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
  /* eslint-disable no-undef */
  /* eslint-disable no-new */
  /* eslint-disable new-cap */
  import excelPreviewInfo from '../../src/file-info.vue'
  import TableTree from '@/views/common/table/table-tree'
  export default {
    watch: {
      filterText (val) {
        this.$refs.tree.filter(val)
      },
      filterTextBase (val) {
        this.$refs.treeBase.filter(val)
      }
    },
    data () {
      return {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        fileData: [],
        dataListSelections: [],

        pageHeight: '',
        suffix: '',
        fileTypes: '',
        pageWidth: '',
        fileType: { IMG: '3', DOC: '4', XLSX: '5', PDF: '6', AUDIO: '8', VIDEO: '7' },
        filterText: '',
        loading: false,
        dataForm: {
          id: '',
          name: '',
          fileName: '',
          filePath: '',
          fileSize: '',
          parentId: '',
          suffix: '',
          fileFrom: '1'
        },
        Url: '',
        uploadUrl: '',
        addHeaders: {
          token: ''
        },
        dataListLoading: false,
        excelPreviewVisible: false,
        // 列表 list 文件夹 folder
        displayStyle: 'list',
        currentPid: '1',
        navList: [],
        currentData: '',
        filterTextBase: '',
        expandedList: [],
        dataList: [],
        dirList: [],
        dirListProps: {
          label: 'dirName',
          children: 'children'
        }
      }
    },
    activated () {

    },
    components: {
      excelPreviewInfo,
      // dirTreeSelect,
      TableTree
    },
    mounted () {
      if (this.$route.params.id) {
        return
      }
      this.getDataList()
    },
    computed: {
      mapHeight: {
        get () {
          return this.$store.state.common.documentClientHeight
        }
      }
    },
    filters: {
      numFilter (value) {
        let relValue = parseFloat(value).toFixed(2)
        return relValue
      }
    },
    methods: {
      // 获取左侧树形数据
      getDataList (pid, type) {
        // this.$refs.dirTree.init('0');
        this.uploadUrl = this.$http.adornUrl(`/src/file/upload`)
        this.addHeaders.token = Vue.cookie.get('token')
        // 初始化值，防止污染
        this.dataForm.id = ''
        this.dataForm.fileName = ''
        this.dataForm.suffix = ''
        this.dataForm.filePath = ''
        this.dataForm.fileSize = ''
        this.dataForm.parentId = ''
        this.dataForm.name = ''
      },
      /***
       * 树节点过滤
       */
      filterNodeBase (value, data) {
        if (!value) return true
        return data.dirName.indexOf(value) !== -1
      },
      // 文件预览
      filePreview (id) {
        this.excelPreviewVisible = true
        this.$nextTick(() => {
          this.$refs.excelPreviewInfo.init(id)
        })
      },
      // 是否为文件夹
      isDir (val) {
        return val > 0
      },
      getPageHeight () {
        this.pageHeight = this.$refs['filepro'].parentElement.clientHeight - 20 + 'px'
      },
      setSuffix (suffix) {
        this.suffix = suffix
      },

      // 文件名单元格样式调整
      cellStyle (row, column, rowIndex, columnIndex) {
        if (row.column.label === '文件名') {
          return 'cursor: pointer'
        }
      },
      // 确认选择
      selectData () {
        if (this.dataListSelections.length > 1) {
          this.$message.warning('只能选择一个文件！')
        } else {
          this.rowDbclick(this.dataListSelections[0])
        }
      },
      // 确认选择回传数据
      rowDbclick (row) {
        this.$emit('setFileData', row)
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataByDir(this.currentData)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataByDir(this.currentData)
      },
      // 获取hdfs的文件
      getDataByDir (data) {
        if (!data) {
          this.$message.warning('请选择数据源！')
          return
        }
        this.currentData = data
        this.$http({
          url: this.$http.adornUrl('/src/dir/hdfslist'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'parentId': data.id,
            'dirName': data.dirName,
            'cat': data._level
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.totalCount = data.page.totalCount
            this.fileData = data.page.list
            this.fileData = this.fileData.map(v1 => {
              v1.fileName = v1.dirName
              v1.fileType = v1.dirType
              v1.filePath = v1.dirPath
              return v1
            })
          } else {
            this.totalCount = 0
            this.fileData = []
          }
        })
      }
    }
  }
</script>
<style scoped>
  .custom-tree-node {
    width: 90%;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
  }

  .node-icon {
    float: left;
    padding: 4px;
    font-size: 16px;
  }

  .el-divider--horizontal {
    margin: 0px;
  }

  .item-group {
    margin-bottom: 10px;
  }

  .tree-item {
    clear: both;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .tree-item:hover {
    background-color: rgb(247, 248, 250);
  }

  .btn-item {
    text-align: center;
    color: #606266;
    background-color: rgb(247, 248, 250);
    border-radius: 5px;
  }

  .btn-item:hover {
    background-color: #fff;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    /*box-shadow: rgba(61, 77, 102, 0.15) 0px 2px 8px 0px;*/
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .add-icon-row {
    margin-bottom: 10px;
    margin-top: 20px;
    font-size: 65px;
  }

  .btn-item-op {
    font-size: 16px;
  }

  .list-node {
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    display: block;
    color: #606266;
  }

  .list-node:hover {
    background: #eee;
  }

  .list-node__active {
    background: #f0f7ff;
  }

  .el-icon-arrow-right:before {
    content: "\E6E0";
  }
  .el-pagination {
    padding-top: 5px;
    text-align: right;
  }
</style>

